<template>
	<view class="pageWrapper" :style="{ '--color': color }">
		<status-bar title="确定订单"></status-bar>

		<Toggles :pageData="pageData" :delivery="delivery" :goods_id="goods_id" :specs="specs" :car_id="car_id"
			@Use_tabWay="Use_tabWay" @Usesite="Address = $event" @buy_name="uname = $event" @buy_phone="utel = $event"
			ref="toggels" @Updateproduct="Updateproduct">
		</Toggles>

		<Product :pageData="pageData" :arg="requestData" :goods_id="goods_id" :car_id="car_id" @changeData="changeData"
			@getPageData="getPageData"></Product>

		<Group :open_group="open_group" :group_id="group_id" :pageData="pageData"></Group>

		<loading-view :loading="!pageData" marginTop="30" rows="4" Width="710rpx">
			<view class="wrapper">
				<view class="wrapper_view">
					<view class="AllBox">
						<view class="row j-sb a-center">
							<view class="d-flex a-center">
								<text class="color_33 size32">商品总价</text>
								<text class="color_99 size28 m-left10">共{{ pageData.allGoodsNumber }}件商品</text>
							</view>
							<view class="d-flex">
								<view class="Pricesymbol">￥</view>
								<text class="Price">{{ allGoodsMoney }}</text>
							</view>
						</view>
						<text class="color_99 h6" v-if="pageData.allowBuyTitle">{{ pageData.allowBuyTitle }}</text>
					</view>

					<view class="freight">
						<view class="row j-sb a-center">
							<text class="color_33 size32">配送费</text>
							<view class="d-flex" v-if="Number(pageData.express) > 0">
								<view class="Pricesymbol">￥</view>
								<text class="Price">{{ freight }}</text>
							</view>
							<text class="color_33 size32" v-else>{{ distribution }}</text>
						</view>
						<text class="color_99 h6"
							v-if="pageData.freeExpressTitle">{{ pageData.freeExpressTitle }}</text>
					</view>
					<view class="freight" v-if="pageData.all_packing && pageData.all_packing > 0">
						<view class="row j-sb a-center">
							<text class="color_33 size32">打包费</text>
							<view class="d-flex">
								<view class="Pricesymbol">￥</view>
								<text class="Price">{{ pageData.all_packing }}</text>
							</view>
						</view>
					</view>

					<Activity :Sale="Sale"></Activity>

					<Member :Sale="Sale"></Member>

					<Coupon :Sale="Sale" @Use_couponId="Use_couponId" :pageData="requestData"></Coupon>

					<Points :Sale="Sale" :pageData="requestData" @Use_points="Use_points"></Points>
				</view>

				<view class="byJob">
					<text class="color_33 size34 m-right10">合计：</text>
					<view class="d-flex">
						<view class="Pricesymbol">￥</view>
						<text
							class="Price">{{ paymentMoney == 0 ? '0.00' : parseFloat(paymentMoney).toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</loading-view>

		<loading-view :loading="!pageData" marginTop="30" rows="1" :rowsWidth="['100%']" Width="710rpx" rowsHeight="50">
			<view class="Message">
				<view class="leaveword">
					<text class="color_33 size32">买家留言</text>
					<input type="text" class="leavInput" v-model="remark" placeholder-class="placeClass"
						placeholder="留言建议提前协商(200字以内)" />
				</view>
			</view>
		</loading-view>

		<!-- 平台通告信息 -->
		<view class="annunciate" v-if="pageData.tipsText">
			<u-parse :content="pageData.tipsText" :domain="imgUrl"></u-parse>
		</view>

		<!-- 支付方式 -->
		<view class="payList" v-if="payMode.length">
			<view class="size32 color_33 p-left24">选择支付账户</view>
			<view class="row m-top30">
				<view class="item flexac f-column" :class="{'active': payType == item.payType, 'disabled': item.money && parseFloat(item.money) < parseFloat(paymentMoney)}" 
					@click="changePay(item)" v-for="(item,index) in payMode" :key="index">
					<view class="size28">{{ item.title }}</view>
					<view class="h6 color_99 m-top4" v-if="item.money">{{ item.money }}</view>
				</view>
			</view>
		</view>

		<view class="footer" v-if="pageData">
			<view class="footerBox">
				<view class="Copewith">
					<text class="color_33 size34">应付：</text>
					<view class="d-flex">
						<view class="withsymbol">￥</view>
						<text class="withPrice">
							{{ paymentMoney == 0 ? '0.00' : parseFloat(paymentMoney).toFixed(2) }}
						</text>
					</view>
				</view>
				<view class="subMit" :class="isContinue ? 'bgcolor' : 'bgCC'" @click="Continue">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Toggles from './components/Toggles.vue';
	import Product from './components/Product.vue';
	import Group from './components/Group.vue';
	import Address from './components/Address.vue';
	import Coupon from './components/Coupon.vue';
	import Points from './components/Points.vue';
	import Activity from './components/Activity.vue';
	import Member from './components/Member.vue';
	import LoadingView from './components/LoadingView.vue';
	import Api from '@/common/Api.js';
	export default {
		components: {
			Toggles,
			Product,
			Group,
			Address,
			Coupon,
			Points,
			Activity,
			Member,
			LoadingView
		},
		data() {
			return {
				imgUrl: this.imgUrl,
				goods_id: '',
				goods_num: '',
				car_id: '', // 购物车购买
				group_id: '', //参团购买
				open_group: '', // 开团购买 1为开团
				record_id: '', // 砍价
				specs: {}, // 规格
				Address: '',
				paymentMoney: '', // 实付款
				delivery: 0,
				pageData: '',
				uname: '',
				utel: '',
				remark: '', // 留言备注

				couponsId: '',
				Sale: '',
				useIntegral: 0, // 是否使用积分 0不使用 1使用
				payMode: [], // 支付方式
				payType: '',
				playid: '',
				payFlag: 0
			};
		},
		onLoad(opt) {
			if (opt.goods_id) this.goods_id = opt.goods_id;
			if (opt.goods_num) this.goods_num = opt.goods_num;
			if (opt.car_id) this.car_id = opt.car_id;
			if (opt.open_group) this.open_group = opt.open_group;
			if (opt.group_id) this.group_id = opt.group_id;
			if (opt.record_id) this.record_id = opt.record_id;
			if (opt.delivery) this.delivery = opt.delivery;
			if (opt.specs_bind_id) {
				this.specs = {
					specs_bind_id: opt.specs_bind_id,
					specs_bind_text: opt.specs_bind_text
				};
			}
		},
		onUnload() {
			this.payFlag = 0
		},
		onShow() {
			this.getPageData();

			let options = wx.getEnterOptionsSync()
			if(options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.payFlag == 1) {
				let extraData = options.referrerInfo.extraData
				if(!extraData) return
				if(extraData.code == 'success') {
					this.$rectTo('/pages/index/pay_scs?playid=' + this.playid)
				} else {
					this.$rectTo('/pages/index/orderList?status=0')
				}
			}
		},
		methods: {
			...mapMutations(['updateOrderstatus']),
			getPageData() {
				let url = '/zzj_singleSaleApi/getPurchase';
				if (this.record_id) url = '/BargainApi/getPurchase';
				let shop_id = uni.getStorageSync('shop_id') || '';
				this.$http
					.get({
						url,
						data: {
							goods_id: this.goods_id,
							num: this.goods_num,
							specs_bind_id: this.specs.specs_bind_id ?? '',
							Aregion: this.Address.Aregion + this.Address.Aaddress,
							car_id: this.car_id,
							group_id: this.group_id,
							open_group: this.open_group,
							record_id: this.record_id,
							shop_id: this.car_id ? '' : shop_id,
							delivery: this.delivery
						}
					})
					.then((res) => {
						if (res.code != 100) return this.$Toast(res.msg);
						const result = res;
						this.paymentMoney = result.totalMoney;
						this.pageData = result;
						this.payMode = result.payMode || []
						if(this.payMode.length) {
							if(this.payType) {
								let current = this.payMode.find(item => item.payType == this.payType)
								if(!current.money || parseFloat(current.money) >= parseFloat(this.paymentMoney)) return
							}
							let first = this.payMode.find(item => !item.money || parseFloat(item.money) >= parseFloat(this.paymentMoney))
							if(first) this.payType = first.payType
						}
						if (this.group_id || this.open_group) return;

						// allowBuy 最低下单金额
						result.allowBuy == 0 ? this.updateOrderstatus(false) : this.updateOrderstatus(true);
						// this.$refs('toggels').getOldAddress();
						this.getPreferential();
					});
			},

			Use_tabWay(event) {
				// if (this.delivery == event) return
				this.delivery = event;
				this.getPageData();
			},
			async getPreferential() {
				const paramData = await Api.getPreferential(this.requestData);
				this.Sale = paramData;
				this.paymentMoney = paramData.payMoney;
			},
			Use_couponId(event) {
				this.couponsId = event;
				this.getPreferential();
			},
			Use_points() {
				this.useIntegral = this.useIntegral == 1 ? 0 : 1;
				this.getPreferential();
			},

			Continue() {
				if (this.playid) return this.pay_money(this.playid)
				if (!this.isContinue) return;
				if (this.pageData.allowBuy == 0) return this.$Toast(this.pageData.allowBuyTitle);
				if (this.delivery == 1) {
					if (!this.Address.Aaddress) return this.$Toast('请选择收货地址');
					this.uname = this.Address.Aname;
					this.utel = this.Address.Amobile;
				}
				if (this.delivery == 2) {
					if (!this.uname) return this.$Toast('请输入姓名');
					if (!this.utel) return this.$Toast('请输入电话');
					if (!this.$reg.phone.test(this.utel)) return this.$Toast('输入电话号码有误');
				}
				this.$Modal('是否确定支付', '支付成功后可在我的订单中查看').then((config) => {
					if (config) this.InitiatePayment();
				});
			},
			InitiatePayment() {
				let url;
				let paramData = {
					delivery: this.delivery,
					receivingAddress: this.Address.Aregion + this.Address.Aaddress,
					uname: this.uname,
					utel: this.utel,
					express: this.pageData.express,
					totalMoney: this.paymentMoney,
					remarks: this.remark,
					couponID: this.couponsId,
					useIntegral: this.useIntegral,
					share_v_id: this.share_v_id,
					group_id: this.group_id,
					shop_id: uni.getStorageSync('shop_id') || '',
					aes_coupon: this.Sale.aes_coupon ? this.Sale.aes_coupon : ''
				};
				if (this.goods_id) {
					// 普通下单
					url = '/zzj_singleSaleApi/generateOrder';
					paramData['goods_id'] = this.goods_id;
					paramData['num'] = this.goods_num;
					paramData['single'] = 1;
					paramData['specs_bind_id'] = this.specs.specs_bind_id ?? '';
					paramData['specs_bind_text'] = this.specs.specs_bind_text ?? '';
				}
				if (this.car_id) {
					// 购物车下单
					url = '/zzj_singleSaleApi/storePayCart';
					paramData['couponsId'] = this.couponsId;
					paramData['car_id'] = this.car_id;
				}
				if (this.record_id) {
					// 砍价下单
					url = '/BargainApi/generateOrder';
					paramData['record_id'] = this.record_id;
				}
				if (this.open_group == 1 || this.group_id) {
					// 开团购买
					paramData['single'] = 0;
				}

				this.$showLoading('');
				this.$http
					.post({
						url,
						data: paramData
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 100) return this.$Toast(res.msg);
						uni.setStorageSync('shop_id', this.ordersShop_id);

						// #ifdef H5
						window.location.href =
							'https://sra.weikebaba.com/index.php/accountPay/weChatCashierPage?orderStr=' + res.payID;
						// #endif
						// #ifndef H5
						// this.$rectTo('/moneyPage/capital/checkstand?payid=' + res.payID);
						this.playid = res.payID
						this.pay_money(res.payID)
						// #endif
					});
			},

			changeData(event, num = 1) {
				if (event == 1) this.goods_num--;
				if (event == 2) this.goods_num++;
				if (event == 3) this.goods_num = num;
				this.getPageData();
			},
			// 超出范围更新产品
			Updateproduct(Result) {
				if (this.goods_id) this.goods_id = Result.newGoodsId;
				if (this.car_id) this.car_id = Result.newCardId;
				if (Result.newGoodsSpecId) this.specs.specs_bind_id = Result.newGoodsSpecId;
				if (Result.needOperateShopId) uni.setStorageSync('shop_id', Result.needOperateShopId);
				this.getPageData();
			},

			changePay(item) {
				if(item.money && parseFloat(item.money) < parseFloat(this.paymentMoney)) return
				this.payType = item.payType
			},

			pay_money(playid) {
				let that = this
				this.$showLoading('支付中···')
				this.$http.post({
					url: '/accountPay/cashierStorePageAjax',
					data: {
						orderAesStr: playid,
						payType: this.payType,
						openId: this.openid
					}
				}).then(res => {
					this.$hideLoading()
					if(res.code != 100) return this.$Toast(res.msg)
					var data = res.data
					const Result = res.data
					// 微信支付
					if(this.payType == 1) {
						// #ifdef MP-WEIXIN
						if (Result.extraData) {
							this.payFlag = 1
							wx.openEmbeddedMiniProgram({
								appId: Result.appId,
								extraData: Result.extraData
							})
						} else {
							uni.getProvider({
								service: 'oauth',
								success: function(resp) {
									if (resp.provider) {
										uni.requestPayment({
											provider: resp.provider[0],
											orderInfo: data,
											timeStamp: data.timeStamp,
											nonceStr: data.nonceStr,
											package: data.package,
											signType: data.signType,
											paySign: data.paySign,
											success: function() {
												that.$rectTo('/pages/index/pay_scs?playid=' + playid)
											},
											fail: function(err) {
												console.log('fail:' + JSON.stringify(err))
												that.$rectTo('/pages/index/orderList?status=0')
											}
										})
									}
								}
							})
						}
						// #endif
					} else {
						this.$rectTo('/pages/index/pay_scs?playid=' + playid)
					}
				})
			}
		},
		computed: {
			...mapState(['color', 'share_v_id', 'ordersShop_id', 'isContinue', 'openid']),
			allGoodsMoney() {
				if (!this.pageData) return;
				return Number(this.pageData.allGoodsMoney).toFixed(2);
			},
			freight() {
				const express = Number(this.pageData.express);
				if (express > 0) return express.toFixed(2);
			},

			distribution() {
				if (this.delivery == 1) {
					return '快递 免运费';
				} else {
					return '免运费';
				}
			},

			requestData() {
				return {
					specs: this.specs,
					open_group: this.open_group,
					group_id: this.group_id,
					goods_id: this.goods_id,
					pageData: this.pageData,
					goods_num: this.goods_num,
					car_id: this.car_id,
					useIntegral: this.useIntegral,
					couponsId: this.couponsId,
					record_id: this.record_id
				};
			},
			isshowWay() {
				if (!this.pageData) return;
				const isFlag = this.pageData.deliverys.includes(',');
				return isFlag;
			}
		}
	};
</script>
<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.pageWrapper {
		// #ifdef H5
		padding-bottom: 160rpx;
		// #endif
		// #ifdef MP-WEIXIN
		padding-bottom: 250rpx;
		// #endif
	}

	.wrapper {
		width: 710rpx;
		background-color: #ffffff;
		padding: 10rpx 24rpx 24rpx 24rpx;
		margin: 30rpx auto 0;
		border-radius: 10rpx;

		.wrapper_view {
			border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
			padding-bottom: 20rpx;
		}

		.AllBox {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20rpx 0;
		}

		.freight {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20rpx 0;
		}

		.coupon {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			.couponBox {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.byJob {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 30rpx;

			.allNum {
				color: #333;
				font-size: 26rpx;
			}
		}
	}

	.Pricesymbol {
		color: var(--color);
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.Price {
		color: var(--color);
		font-size: 36rpx;
	}

	.Message {
		width: 710rpx;
		background-color: #ffffff;
		padding: 10rpx 24rpx;
		margin: 20rpx auto 0;
		border-radius: 10rpx;

		.leaveword {
			width: 100%;
			display: flex;
			align-items: center;

			.leavInput {
				flex: 1;
				padding-left: 20rpx;
				height: 90rpx;
				text-align: right;
				font-size: 28rpx;
				color: #333;
			}

			.placeClass {
				color: #ccc;
				font-size: 28rpx;
			}
		}
	}

	.annunciate {
		width: 710rpx;
		background-color: #ffffff;
		padding: 24rpx;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
	}

	.footer {
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid #f8f8f8;

		.footerBox {
			width: 100%;
			height: 120rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Copewith {
				display: flex;
				align-items: center;

				.withsymbol {
					color: var(--color);
					font-size: 26rpx;
					margin-top: 24rpx;
				}

				.withPrice {
					color: var(--color);
					font-size: 52rpx;
				}
			}

			.subMit {
				width: 220rpx;
				height: 80rpx;

				color: #ffffff;
				font-size: 32rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	::v-deep .u-number-box {
		&__input {
			font-size: 36rpx !important;
		}
	}

	.payList {
		width: 710rpx;
		background-color: #ffffff;
		padding: 30rpx 24rpx 6rpx 0;
		margin: 30rpx auto 0;
		border-radius: 10rpx;
		.item {
			min-width: 204rpx;
			height: 120rpx;
			margin: 0 0 24rpx 24rpx;
			border: 1rpx solid #ccc;
			border-radius: 8rpx;
			&.active {
				border: 1rpx solid var(--color);
				>view {
					color: var(--color);
				}
			}
			&.disabled {
				background: #f8f8f8;
				>view {
					color: #ccc;
				}
			}
		}
	}
</style>